<!-- 左树右表格demo -->
<template>
  <div class="common-equipment-model">
    <div>
      <!-- 左边的树   -->
      <!-- :props="{ label: 'name' }" 要显示在树上的中文-->
      <ele-tree-composite-table
        :key="key"
        v-loading="loading"
        leftWidth="300px"
        :formConfig="searchConfig"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :getList="getDataList"
        ref="treeCompositeTable"
        :default-expand-all="false"
        :props="props"
        :lazy="true"
        :load="loadNode"
        :getParamsFromNode="getParamsFromNode"
        uniqueId="mesTechnologyCharacteristicTable"
      >
        <template v-slot:default="{ data }">
          <div class="flex label-pack">
            <span class="padd-r-5">
              <img v-if="!data.data.isLeaf" src="@/assets/images/xia.png" />
              <img v-else src="@/assets/images/ping.png" />
            </span>
            <!--  data.node.isCurrent || data.node.indeterminate -->
            <svgIcon
              :color="data.node.isCurrent ? '#3d82ea' : '#b6c0c9'"
              :type="
                (
                  iconType.find((ite) => data.data.nodeLevel == ite.value) || {
                    type: 0,
                  }
                ).type
              "
            />
            <span class="padd-l-5">{{ data.node.label }}</span>
          </div>
        </template>
      </ele-tree-composite-table>
    </div>
    <!--  修改弹窗  -->
    <ele-form-drawer
      size="70%"
      :isLoading="formConfirmLoading"
      v-model="formDataDialog"
      v-bind="formDescDialog"
      :request-fn="handleSubmit"
      :visible.sync="visible"
      :title="title"
    >
      <template v-slot:seriesCode>
        <el-input
          v-model="formDataDialog.seriesCode"
          readonly
          :placeholder="$i18n.t('mesTechnologyCharacteristic.SelectSeriesCode')"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            disabled="true"
            @click="mesSeriesDialogVisible = true"
          ></el-button>
        </el-input>
      </template>
      <template v-slot:modelCode>
        <!--      placeholder="请选择型号" -->
        <el-input
          v-model="formDataDialog.modelCode"
          readonly
          :placeholder="$i18n.t('mesTechnologyCharacteristic.SelectModelCode')"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            disabled="true"
            @click="mesModelDialogVisible = true"
          ></el-button>
        </el-input>
      </template>
      <template v-slot:techCode>
        <el-input
          v-model="formDataDialog.techCode"
          readonly
          :placeholder="$i18n.t('mesTechnologyCharacteristic.SelectTechCode')"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="mesTechnologyDialogVisible = true"
          ></el-button>
        </el-input>
      </template>
      <template v-slot:workCellCode>
        <el-input
          v-model="formDataDialog.workCellCode"
          readonly
          :placeholder="$i18n.t('mesTechnologyCharacteristic.SelectStation')"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            :disabled="!formDataDialog.techCode"
            @click="mesTechnologyProcessDialogVisible = true"
          ></el-button>
        </el-input>
      </template>
      <template v-slot:labelProperty>
        <el-button
          type="primary"
          plain
          @click="mesPropertyDialogVisible = true"
          >{{ $i18n.t("mesTechnologyCharacteristic.attributes") }}</el-button
        >
        <el-button
          type="primary"
          plain
          @click="exportProp"
          v-if="formDataDialog.id"
          >{{ $i18n.t("mesTechnologyCharacteristic.Properties") }}</el-button
        >
      </template>
      <template v-slot:characteristicList="{ formData }">
        <el-table :data="formData.characteristicList">
          <el-table-column
            prop="propCode"
            :label="$i18n.t('mesTechnologyCharacteristic.propCode')"
            minWidth="180"
          >
          </el-table-column>
          <el-table-column
            prop="propName"
            :label="$i18n.t('mesTechnologyCharacteristic.propName')"
            minWidth="180"
          >
          </el-table-column>
          <el-table-column
            prop="characterCode"
            :label="$i18n.t('mesTechnologyCharacteristic.characterCode')"
            minWidth="120"
          >
          </el-table-column>
          <el-table-column
            prop="characterName"
            :label="$i18n.t('mesTechnologyCharacteristic.characterName')"
            minWidth="200"
          >
          </el-table-column>
          <el-table-column
            prop="isReport"
            :label="$i18n.t('mesTechnologyCharacteristic.isReport')"
            minWidth="100"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isReport"
                active-value="1"
                inactive-value="0"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            prop="displayOrder"
            :label="$i18n.t('mesTechnologyCharacteristic.displayOrder')"
            minWidth="110"
          >
            <template slot-scope="scope">
              <el-input-number
                style="width: 100%;"
                v-model="scope.row.displayOrder"
                :min="1"
                :max="99999999"
                controls-position="right"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            :label="$i18n.t('common.operation')"
            width="100"
          >
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index)"
                type="danger"
                plain
                size="small"
              >
                {{ $i18n.t("common.delete") }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </ele-form-drawer>
    <ele-dialog-table
      :title="$t('mesTechnologyCharacteristic.SelectModelCode')"
      width="900px"
      :visible.sync="mesModelDialogVisible"
      :formConfig="mesModelSearchDialog"
      :column="mesModelDialogColumn"
      :otherParam="{ seriesCode: formDataDialog.seriesCode }"
      @getSelectData="getSelectMesModelList"
      :getList="getMesModelList"
      :hasFooter="hasMesModelFooter"
    >
    </ele-dialog-table>
    <ele-dialog-table
      :title="$t('mesTechnologyCharacteristic.SelectSeriesCode')"
      width="900px"
      :visible.sync="mesSeriesDialogVisible"
      :formConfig="mesSeriesSearchDialog"
      :column="mesSeriesDialogColumn"
      @getSelectData="getSelectMesSeries"
      :getList="getMesSeriesList"
      :hasFooter="hasMesSeriesFooter"
    >
    </ele-dialog-table>
    <ele-dialog-table
      :title="$t('mesTechnologyCharacteristic.SelectTechCode')"
      width="900px"
      :visible.sync="mesTechnologyDialogVisible"
      :formConfig="mesTechSearchDialog"
      :column="mesTechDialogColumn"
      @getSelectData="getSelectMesTech"
      :getList="getMesTechList"
      :hasFooter="hasMesTechFooter"
    >
    </ele-dialog-table>
    <ele-dialog-table
      :title="$t('mesTechnologyCharacteristic.SelectWorkCell')"
      width="900px"
      :pagination="false"
      :visible.sync="mesTechnologyProcessDialogVisible"
      :formConfig="mesTechnologyProcessSearchDialog"
      :column="mesTechnologyProcessDialogColumn"
      :otherParam="{ parentId: formDataDialog.techId }"
      @getSelectData="getSelectMesTechnologyProcess"
      :getList="getTechnologyProcessList"
      :hasFooter="hasMesTechnologyProcessFooter"
    >
    </ele-dialog-table>
    <ele-dialog-table
      :title="$t('mesTechnologyCharacteristic.selectMesProperty')"
      width="900px"
      :visible.sync="mesPropertyDialogVisible"
      :formConfig="mesPropertySearchDialog"
      :column="mesPropertyDialogColumn"
      @getSelectData="getSelectMesProperty"
      :getList="getMesPropertyList"
      :hasFooter="hasMesPropertyFooter"
    >
    </ele-dialog-table>
  </div>
</template>
<script>
import {
  operateList,
  searchConfig,
  formDescDialog,
  rowConfig,
  importFormDescDialog,
} from "./config";
import svgIcon from "./components/svgIcon.vue";
import { mesModelInventoryDialog } from "./mixin/mesPropertyMixin";
import { mesModelDialog } from "./mixin/modelMixin";
import { mesSeriesDialog } from "./mixin/seriesMixin";
import { mesTechnologyDialog } from "./mixin/technologyMixin";
import { mesTechnologyProcessDialog } from "./mixin/technologyProcessMixin";
import { exportExcel } from "@/utils/judge";
import {
  getDataList, // 表格查询
  getTree, // 树查询
  getInfo, // 获取详情
  submitDelete, // 删除
  submitEdit, // 修改
  submitCreate, // 新增
  getIsReportList,
  getDetailList,
  exportUrl,
  templateUrl,
} from "@/api/process/mesTechnologyCharacteristic";
import uploadNoAuto from "@/components/upload-no-auto";

export default {
  name: "mesTechnologyCharacteristic",
  components: {
    uploadNoAuto,
    svgIcon,
  },
  mixins: [
    mesModelInventoryDialog,
    mesModelDialog,
    mesSeriesDialog,
    mesTechnologyDialog,
    mesTechnologyProcessDialog,
  ],
  data() {
    return {
      key: 1,
      iconType: [
        { value: 1, name: $i18n.t("mesTechnologyCharacteristic.productCategory"), type: 1 },
        { value: 2, name: $i18n.t("mesTechnologyCharacteristic.modelNumber"), type: 2 },
        { value: 3, name: $i18n.t("mesTechnologyCharacteristic.technology"), type: 3 },
        { value: 4, name: $i18n.t("mesTechnologyCharacteristic.workCell"), type: 4 },
      ],
      // 查询表格时获取子节点的字段，value 取节点的哪一个字段值，key请求时传的key
      // value是点击左边树时要获取对象的哪个属性，eg object.id就写id;key是做表格查询时传入的搜索条件的name
      getParamsFromNode: {
        column: [
          { value: "seriesCode", key: "seriesCode" },
          { value: "modelCode", key: "modelCode" },
          { value: "techCode", key: "techCode" },
          { value: "techVersion", key: "techVersion" },
          { value: "workCellCode", key: "workCellCode" },
          { value: "nodeLevel", key: "nodeLevel" },
        ],
      },
      props: {
        label: "nodeText",
        id: "nodeValue",
        isLeaf: "isLeaf",
      },
      loading: false, // 页面loading
      formConfirmLoading: false, // 弹框确定的loading
      searchConfig,
      operateList,
      title: null, // 修改|新增弹框标题
      formDataDialog: {}, // 修改|新增弹框表单数据
      formDescDialog, // 修改|新增弹框表单配置
      visible: false, // 修改|新增弹框显示隐藏
      getDataList, // 表格查询
      getTree, // 树查询
      // 列表页字段的绑定配置
      column: [
        {
          type: "selection",
          fixed: "left",
        },
        {
          type: "index",
          label: $i18n.t("common.order"),
          width: 60,
          fixed: "left",
        },
        {
          prop: "propCode",
          label: $i18n.t("mesTechnologyCharacteristic.materialCode"),
          minWidth: 150,
          showOverflowTooltip: true,
        },
        {
          prop: "propName",
          label: $i18n.t("mesTechnologyCharacteristic.materialName"),
          minWidth: 250,
          showOverflowTooltip: true,
        },
        {
          prop: "characterCode",
          label: $i18n.t("mesTechnologyCharacteristic.characterCode"),
          minWidth: 150,
          showOverflowTooltip: true,
        },
        {
          prop: "characterName",
          label: $i18n.t("mesTechnologyCharacteristic.characterName"),
          minWidth: 250,
          showOverflowTooltip: true,
        },
        {
          prop: "isReport",
          label: $i18n.t("mesTechnologyCharacteristic.isReport"),
          minWidth: 100,
          showOverflowTooltip: true,
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getIsReportList();
            return list.data.result;
          },
        },
        {
          prop: "displayOrder",
          label: $i18n.t("mesTechnologyCharacteristic.displayOrder"),
          minWidth: 120,
          showOverflowTooltip: true,
        },
        {
          prop: "workCellCode",
          label: $i18n.t("mesTechnologyCharacteristic.workCellCode"),
          minWidth: 150,
          showOverflowTooltip: true,
        },
        {
          prop: "workCellName",
          label: $i18n.t("mesTechnologyCharacteristic.workCellName"),
          minWidth: 250,
          showOverflowTooltip: true,
        },
        {
          prop: "techCode",
          label: $i18n.t("mesTechnologyCharacteristic.techCode"),
          minWidth: 150,
          showOverflowTooltip: true,
        },
        {
          prop: "techName",
          label: $i18n.t("mesTechnologyCharacteristic.techName"),
          minWidth: 250,
          showOverflowTooltip: true,
        },
        {
          prop: "techVersion",
          label: $i18n.t("mesTechnologyCharacteristic.techVersion"),
          minWidth: 110,
          showOverflowTooltip: true,
        },
        {
          prop: "modelCode",
          label: $i18n.t("mesTechnologyCharacteristic.modelCode"),
          minWidth: 150,
          showOverflowTooltip: true,
        },
        {
          prop: "modelName",
          label: $i18n.t("mesTechnologyCharacteristic.modelName"),
          minWidth: 250,
          showOverflowTooltip: true,
        },
        {
          prop: "seriesCode",
          label: $i18n.t("mesTechnologyCharacteristic.seriesCode"),
          minWidth: 150,
          showOverflowTooltip: true,
        },
        {
          prop: "seriesName",
          label: $i18n.t("mesTechnologyCharacteristic.seriesName"),
          minWidth: 250,
          showOverflowTooltip: true,
        },
        {
          prop: "createByName",
          label: $i18n.t("common.createByName"),
          minWidth: 130,
          showOverflowTooltip: true,
        },
        {
          prop: "createTime",
          label: $i18n.t("common.createTime"),
          minWidth: 160,
          showOverflowTooltip: true,
        },
        {
          prop: "updateByName",
          label: $i18n.t("common.updateByName"),
          minWidth: 130,
          showOverflowTooltip: true,
        },
        {
          prop: "updateTime",
          label: $i18n.t("common.updateTime"),
          minWidth: 160,
          showOverflowTooltip: true,
        },
        {
          prop: "operate",
          label: $i18n.t("common.operation"),
          width: 160,
          fixed: "right",
          render: (h, scope) => {
            return (
              <ele-row-operation
                scope={scope}
                rowConfig={rowConfig}
                onRowOperate={this.rowOperate}
              ></ele-row-operation>
            );
          },
        },
      ],
      isLoadingImport: false, // 导入数据loading
      importData: {}, //导入数据
      importVisible: false,
      importFormDescDialog, // 导入字段配置
    };
  },
  computed: {},
  methods: {
    // 顶部按钮操作
    handleOperateEvent({ name, handleName, rows }) {
      this.title = name;
      const fnc = {
        // 新增操作
        add: () => {
          let atree = this.$refs.treeCompositeTable.$refs.tree.getCurrentNode();
          if (!!atree) {
            this.formDataDialog = { ...atree };
            if (!!this.formDataDialog.workCellCode) {
              this.loadBinded();
            }
          } else {
            this.formDataDialog = {};
          }
          this.formDescDialog.disabled = false;
          this.formDescDialog.isShowSubmitBtn = true;
          this.visible = true;
        },
        // 删除操作
        delete: () => {
          this.$confirm($i18n.t("common.deleteBatch",{name:$i18n.t('mesTechnologyCharacteristic.name')}), $i18n.t("common.tip"), {
            confirmButtonText: $i18n.t("common.submit"), // "确定", "确定",
            cancelButtonText: $i18n.t("common.cancel"), // "取消","取消",
            type: "warning",
          }).then(() => {
            const ids = rows.map((val) => val.id);
            this.doDelete({ ids });
          });
        },
        exportExcel: () => {
          exportExcel(templateUrl);
        },
        copy: () => {
          let atree = this.$refs.treeCompositeTable.$refs.tree.getCurrentNode();
          if (!!atree) {
            this.formDataDialog = { ...atree };
            this.loadBinded("copy");
          }
          this.formDataDialog.seriesCode = "";
          this.formDataDialog.seriesName = "";
          this.formDataDialog.modelCode = "";
          this.formDataDialog.modelName = "";
          this.formDataDialog.techCode = "";
          this.formDataDialog.techName = "";
          this.formDataDialog.workCellCode = "";
          this.formDataDialog.workCellName = "";
          this.formDescDialog.disabled = false;
          this.formDescDialog.isShowSubmitBtn = true;
          this.visible = true;
        },
      };
      fnc[handleName] && fnc[handleName]();
    },
    // 表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name;
      const fnc = {
        edit: () => {
          this.getInfo(row.id, true);
        },
        info: () => {
          this.getInfo(row.id, false);
        },
      };
      fnc[handleName] && fnc[handleName]();
    },
    // 删除
    doDelete(data) {
      submitDelete(data).then((res) => {
        const msg = res.data.message;
        this.$message.success(msg || $i18n.t('common.deleteSuccess'));
        this.refresh(true);
      });
    },
    // 获取详情
    getInfo(id, isEdit) {
      this.loading = true;
      if (isEdit) {
        this.formDescDialog.disabled = false;
        this.formDataDialog.isShowSubmitBtn = true;
      } else {
        console.log("仅查看");
        this.formDescDialog.disabled = true;
        this.formDataDialog.isShowSubmitBtn = false;
        console.log(this.formDataDialog);
      }
      getInfo(id)
        .then((res) => {
          // const { result } = res.data;
          // result.deptIds = Array.isArray(result.deptIds)
          //   ? result.deptIds.join(",")
          //   : null;
          this.formDataDialog = res.data.result;
          // checkBox处理
          this.visible = true;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 弹框提交事件
    handleSubmit(data) {
      if (this.formConfirmLoading) return; // 判断状态
      const params = this.formDataDialog.id
        ? { title: $i18n.t('common.editSuccess'), api: submitEdit, data }
        : { title: $i18n.t('common.addSuccess'), api: submitCreate, data };
      this.submit(params);
    },
    // 新增和修改提交事件
    submit({ title, api, data }) {
      this.formConfirmLoading = true;
      // checkbox处理
      api(data)
        .then((res) => {
          const msg = res.data.message;
          this.$message.success(msg || title);
          this.visible = false;

          this.refresh(true);
        })
        .finally(() => {
          this.formConfirmLoading = false;
        });
    },
    // 刷新表格数据 isReset 是否重新刷新(包括左边树结构的刷新)
    refresh(isReset = false) {
      this.key = new Date().getTime();
      this.$refs.treeCompositeTable.refresh(isReset);
    },
    loadNode(node, resolve) {
      getTree(node.data).then((res) => {
        resolve(res.data.result);
      });
    },
    loadBinded(flag) {
      let seriesCode = this.formDataDialog.seriesCode;
      let modelCode = this.formDataDialog.modelCode;
      let techCode = this.formDataDialog.techCode;
      let workCellCode = this.formDataDialog.workCellCode;

      getDetailList({ seriesCode, modelCode, techCode, workCellCode }).then(
        (res) => {
          if (
            !this.formDataDialog.characteristicList ||
            this.formDataDialog.characteristicList.length == 0
          ) {
            if (flag == "copy") {
              if (!!res.data.result) {
                for (let item of res.data.result) {
                  item.id = null;
                }
              }
            }
            // this.formDataDialog.characteristicList = res.data.result
            this.$set(
              this.formDataDialog,
              "characteristicList",
              res.data.result || []
            );
          }
        }
      );
    },
    exportProp() {
      let seriesCode = this.formDataDialog.seriesCode;
      let modelCode = this.formDataDialog.modelCode;
      let techCode = this.formDataDialog.techCode;
      let workCellCode = this.formDataDialog.workCellCode;
      exportExcel(exportUrl, {
        seriesCode,
        modelCode,
        techCode,
        workCellCode,
      });
    },
    deleteRow(index) {
      this.$confirm($i18n.t('common.deleteSingle', { name: $i18n.t('mesTechnologyCharacteristic.name2') }), $i18n.t('common.tip'), {
        confirmButtonText: $i18n.t('common.ok'),
        cancelButtonText: $i18n.t('common.cancel'),
        type: "warning",
      }).then(() => {
        if (!!this.formDataDialog.deleteList) {
          this.formDataDialog.deleteList.push(
            this.formDataDialog.characteristicList[index].id
          );
        } else if (!!this.formDataDialog.characteristicList[index].id) {
          this.formDataDialog.deleteList = [];
          this.formDataDialog.deleteList.push(
            this.formDataDialog.characteristicList[index].id
          );
        }
        this.formDataDialog.characteristicList.splice(index, 1);
      });
    },
    //数据文件上传
    upLoadHandleChange(file) {
      this.$set(this.importData, "file", file);
    },
    // 提交导入信息
    handleSubmitImport() {
      if (!this.importData.file) {
        this.$message.error($i18n.t("common.uploadMsg"));
        return;
      }
      const formData = new FormData();
      formData.append("file", this.importData.file.get("file"));
      this.isLoadingImport = true;
      importData(formData)
        .then((res) => {
          this.$message.success($i18n.t("common.importSuccess"));
          this.isLoadingImport = false;
          this.importVisible = false;
          this.refresh();
        })
        .catch((error) => {
          console.log("错误", error);
          this.$set(this.importData, "file", null);
        })
        .finally(() => {
          this.isLoadingImport = false;
          this.$refs.uploadNoAuto.clearFiles();
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-input-number.is-controls-right .el-input__inner {
  padding-left: 1px !important;
  padding-right: 35px !important;
}
.common-equipment-model {
  .flex {
    display: flex;
  }

  .label-pack {
    span {
      display: block;
    }

    .padd-l-5 {
      padding-left: 5px;
    }
    .padd-r-5 {
      padding-right: 5px;
    }
  }
}
</style>
